<template>
	<view class="p20">
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
			<u-form-item prop="userInfo.actavr" ref="item1">
				<view class=" flex a-center">
					<view class="f16">
						头像
					</view>
					<view class="f12 co-d8 ml10 f1">
						真实头像更容易增加信任度
					</view>
					<button class="flex a-center" open-type="chooseAvatar" @chooseavatar="chooseavatar">
						<image :src="model1.userInfo.avatar || '../../static/tx.png'" class="img32 br50 borrr-50"
							mode="aspectFill">
						</image>
						<image src="../../static/right.svg" class="img16 ml10"></image>
					</button>
					<!-- <image :src="model1.userInfo.actavr" mode="" class="img16 br50"></image> -->
					<!-- <image src="../../static/right.svg" mode="" class="img16 ml10"></image> -->
				</view>
			</u-form-item>
			<u-form-item label="姓名" prop="userInfo.nickname" ref="item1">
				<u--input v-model="model1.userInfo.nickname" placeholder="请输入姓名" border="none"></u--input>
			</u-form-item>
			<u-form-item label="手机号码" labelWidth="100" prop="userInfo.mobile" ref="item1">
				<u--input v-model="model1.userInfo.mobile" placeholder="请输入手机号码" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item labelWidth="100" prop="userInfo.mobel" ref="item1">
				<view class="flex a-center ">
					<view class="16 f1">
						出生日期
					</view>
					<view class="flex a-center" @click="showPop">
						<view class="f16 co-d8" v-if="!defaultData.startTime">请选择年月日</view>
						<view class="f16" v-else>{{defaultData.startTime}}</view>
						<image src="../../static/right.svg" mode="" class="img16 ml10"></image>
					</view>
					<lingfeng-timepicker ref="timePop" type="date" :defaultData="defaultData" :minDate="minDate"
						toolBarTitle="出生日期" :maxDate="maxDate" @change="timeChange">
					</lingfeng-timepicker>
				</view>
			</u-form-item>
			<u-form-item label="性别" prop="userInfo.sex" @click="showSex = true;" ref="item1">
				<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</u--form>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<myFixedBtn>
			<view class="btns btn-1 p20 mlr20" @click="baocun">
				保存
			</view>
		</myFixedBtn>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				showSex: false,
				model1: {
					userInfo: {
						avatar: '',
						nickname: '',
						sex: '',
						mobile: ''
					},
				},
				defaultData: {
					startTime: '',
				},
				minDate: {
					year: 1960,
					month: 1,
					date: 1
				},
				maxDate: {
					year: 2008,
					month: 12,
					date: 31,
				},
				date: [" 1980-01-01", "2025-03-20 08:30"],
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
				],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		computed: {
			...mapState({
				userInfo: state => state.userinfo
			})
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				this.$refs.uForm.validateField('userInfo.sex')
			},
			showPop() {
				this.$refs.timePop.show();
			},
			timeChange(val) {
				console.log(val, '滤芯到期日期');
				this.defaultData.startTime = val
			},
			async getlist() {
				let {
					data
				} = await this.$rqt.getinfo()
				this.model1.userInfo = data
				this.defaultData.startTime = data.date_of_birth
			},
			async baocun() {
				let {
					data
				} = await this.$rqt.setInfo({
					avatar: this.model1.userInfo.avatar,
					mobile: this.model1.userInfo.mobile,
					sex: this.model1.userInfo.sex,
					date_of_birth: this.defaultData.startTime,
					nickname: this.model1.userInfo.nickname
				})
			},
			async chooseavatar(e) {
				// uni.showLoading({
				// 	mask: true
				// })
				// let {
				// 	data
				// } = await this.$rqt.uploadFilePromise('/escort/upload/image', e.detail.avatarUrl,
				// 	'file')
				// this.form.avatar = data.uri
				// console.log(e.detail.avatarUrl, 'ttt')
				// uni.hideLoading()
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},

	};
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item {
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 19rpx 22rpx;
	}

	::v-deep input {
		text-align: right !important;
	}

	::v-deep .u-input {
		justify-content: right !important;
		text-align: right !important;
	}

	::v-deep .u-popup__content {
		border-radius: 20rpx 20rpx 0 0;
	}

	button {
		background-color: transparent;
		border: none !important;
		padding: 0 0 0 20rpx;
		margin: 0 !important;
		line-height: inherit;
	}

	button::after {
		content: none;
	}
</style>